<template>
	<view class="s-page-wrapper is-100vh">
		<view class="is-33vh has-mgt-10">
			<view class="is-flex is-column is-justify-center  is-align-center is-height-100">
				<image src="../../static/img/common/logo.jpg" mode="aspectFit" class="logoimg"></image>
				<text class="t-welcome">设置密码</text>
			</view>
		</view>
		<view class="content">
			<view class="has-mglr-10 ">
				<view class=" has-mgtb-10 ">
					<input password type="text" @input="onInput_newpass" placeholder="请输入新密码" class="is-input1" />
				</view>
				<view class=" has-mgtb-10 ">
					<input password type="text" @input="onInput_compass" placeholder="确认新密码" class="is-input1" />
				</view>
				<view class="has-pd-12 is-red-color is-size-14">
					<rich-text :nodes="strings"></rich-text>
				</view>
				<view class="loginbtn has-radius has-mgtb-20">
					<button type="primary" @click="savepass">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foxtoken:'',
				phone:'',
				nodes:[{
					name: 'div'
				}],
				strings: '',
			};
		},
		onLoad() {
			let info = this.service.getfox();
			if(info[0]){
				this.foxtoken = info[0]['foxtoken'];
				let phones = uni.getStorageSync('loginphone');
				// console.log(info[0])
				if(phones){
					this.phone = phones; 
				}
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
			this.strings = '密码要求：可以包含数字、字母、下划线，并且要同时含有数字和字母，且长度要在8-16位之间';
		},
		methods: {
			onInput_newpass:function(e){
				this.newpass = e.detail.value;
			},
			onInput_compass:function(e){
				this.compass = e.detail.value;
			},
			savepass:function(){
				if(this.service.checkpassword(this.newpass) === false){
					uni.showToast({
						title:'新密码不符合要求',
						icon:'none',
					})
					return;
				}
				if(this.newpass !== this.compass){
					uni.showToast({
						title:'新密码与确认密码不一致',
						icon:'none',
					})
					return;
				}
				uni.request({
					url:this.service.FOX_URL+'diamond/user_savepass',
					method:'POST',
					data: {
						user_key: this.foxtoken,
						new_pass: this.newpass
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						var rest = res.data;
						if(rest.status == 'error'){
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
						}else if(rest.status == 'success'){
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
							setTimeout(function() {                           
							    uni.navigateTo({
							    	url:'../index/index'
							    }) 
							}, 1500)
						}
					}
				})
			}

		}
	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #FFFFFF;
	}

	.content {
		width: 85%;
		margin: 0 auto;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.is-input1 {
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		padding: 12rpx;
		color: #353535;
		font-size: 32rpx;
		box-sizing: border-box;
		appearance: none;
		border-bottom: 1rpx solid #e5e5e5;
		box-shadow: none;
		outline: 0;
		display: block;
		padding-left: 30rpx;
		margin: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
	}

	.iconfont {
		position: absolute;
		font-size: 40rpx;
		right: 12%;
		z-index: 999;
		width: 105rpx;
		text-align: center;
		color: #353535;
		margin-top: -11%;
		background: #fff;
		border-top-right-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.codeimg {
		position: absolute;
		font-size: 28rpx;
		right: 12%;
		z-index: 999;
		width: 200rpx;
		text-align: center;
		color: #353535;
		margin-top: -11%;
		background: #fff;
		border-top-right-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #0084ff;
		opacity: 0.8;
	}
	
	button:after {
		border: 2rpx solid #f2f2f2;
	}
	
	.t-welcome{
		font-weight: bold;
	}
	.font-red{
		font-size: 24rpx;
		color: #f30c2c;
		display: inline-block;
	}
</style>
